<template>
    <div class="input-box" @click="closeOption">
        <div class="hedar">
          <div class="option">
            <div @click.stop="get_sortul()">
              <p>{{sort}}</p>
              <div  :class="{'an-activ':sortul==1}">></div>
            </div>
            <div @click.stop="get_sortTypeul()">
              <p>{{sortType}}</p>
              <div :class="{'an-activ':sortTypeul==1}">></div>
            </div>
            <transition name="fade">
              <ul v-if="sortul" class="sortul">
                <li @click="set_sortul('','所有记录')">所有记录</li>
                <li @click="set_sortul(1,'我的')">我的</li>

              </ul>
            </transition>
            <transition name="fade">
              <ul v-if="sortTypeul" class="sortTypeul">
                <li @click="set_sortTypeul('','所有记录')">所有记录</li>
                <li @click="set_sortTypeul(1,'盲盒对战')">盲盒对战</li>
                <li @click="set_sortTypeul(2,'心跳对战')">心跳对战</li>
                <li @click="set_sortTypeul(3,'官方对战')">官方对战</li>
              </ul>
            </transition>
          </div>
          <div @click="search" class="cxun">查询</div>
        </div>
        <div class="tal-box">
          <p>结束时间</p>
          <p>房间号</p>
          <p>玩家</p>
          <p>盲盒信息</p>
          <p>总额</p>
          <p>金币</p>
        </div>
        <ul class="list-box">
          <li v-for="record in recordList" :key="record.id">
            <div>2021-10-03  00:14:57</div>
            <div>000000000000000000000000</div>
            <div><p><img src="../../assets/hedar-icon1.png" ></p><p><img src="../../assets/hedar-icon1.png" ></p></div>
            <div><p><img src="../../assets/fight-list.png" ></p><p><img src="../../assets/fight-list.png" ></p></div>
            <div><img src="../../assets/money-icon.png" >99.99</div>
            <div><span>已结束</span><span>进行中</span></div>
          </li>
         <li>
           <div>2021-10-03  00:14:57</div>
           <div>000000000000000000000000</div>
           <div><p><img src="../../assets/hedar-icon1.png" ></p><p><img src="../../assets/hedar-icon1.png" ></p></div>
           <div><p><img src="../../assets/fight-list.png" ></p><p><img src="../../assets/fight-list.png" ></p><p><img src="../../assets/fight-list.png" ></p></div>
           <div><img src="../../assets/money-icon.png" >99.99</div>
           <div><span>已结束</span><span>进行中</span></div>
         </li>
         <li>
           <div>2021-10-03  00:14:57</div>
           <div>000000000000000000000000</div>
           <div><p><img src="../../assets/hedar-icon1.png" ></p><p><img src="../../assets/hedar-icon1.png" ></p><p><img src="../../assets/hedar-icon1.png" ></p></div>
           <div><p><img src="../../assets/fight-list.png" ></p><p><img src="../../assets/fight-list.png" ></p></div>
           <div><img src="../../assets/money-icon.png" >99.99</div>
           <div><span>已结束</span><span>进行中</span></div>
         </li>
        </ul>
         <v-pagination :total="total" :display="display" :current-page='current' @pagechange="pagechange"></v-pagination>
    </div>
</template>

<script>
  import pagination from '../pagination.vue'
export default {
  components:{
    'v-pagination': pagination,
  },
 data () {
    return {
      sortul: false,
      sortTypeul: false,
      sort: '所有记录',
      sortType: '所有记录',
      total: 10,     // 记录总条数
      display: 13,   // 每页显示条数
      current: 1,   // 当前的页数
      recordList: []
    }
  },
  created() {
    this.get_list()
  },
  methods: {
    search() {
      this.current = 1
      this.get_list()
    },
    closeOption() {
      this.sortul = false
      this.sortTypeul = false
    },
    pagechange:function(currentPage){
      console.log(currentPage);//该参数就是当前点击的页码数
      // ajax请求, 向后台发送 currentPage, 来获取对应的数据

    },
    get_sortul(){
      this.sortTypeul = false;
      this.sortul = true;
    },
    get_sortTypeul(){
      this.sortul = false;
      this.sortTypeul = true;
    },
    set_sortul(e,k){
      this.sort = k;
      this.sortul = false;
      this.payTime = e;
    },
    set_sortTypeul(e,k){
      this.sortType = k;
      this.sortTypeul = false;
      this.payType = e;
    },
    get_list(){
      this.$api.get('/api/battle/history', {
        pageNum: this.current,
        pageSize: this.display,

      }, res => {
        if (res.code === 200) {
          this.recordList = res.data.content
        }
      })
    },
  }
}
</script>

<style scoped>
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s;
      max-height: 230px;
  }
  .fade-enter,
  .fade-leave-active {
     opacity: 0;
      max-height: 0px;
  }
  .input-box .list-box{
    width: 100%;
    min-height: 700px;
  }
  .input-box .list-box li{
    height: 53px;
    line-height: 53px;
    background-color: #13181E;
    color: #909FBB;
    display: flex;
    font-size: 14px;
  }
  .input-box .list-box li:nth-child(2n){
    background-color: #0B0C10;
  }
  .input-box .tal-box{
    display: flex;
    margin-top: 10px;
  }
  .input-box .tal-box>p{
    height: 53px;
    line-height: 53px;
    background-color: #222833;
    color: #909FBB;
    font-size: 16px;
  }
  .input-box .tal-box>p:first-child,.input-box .list-box li>div:first-child{
    width: 190px;
  }
  .input-box .tal-box>p:nth-child(2),.input-box .list-box li>div:nth-child(2){
    width: 260px;
  }
  .input-box .tal-box>p:nth-child(3),.input-box .list-box li>div:nth-child(3){
    width: 210px;
  }
  .input-box .tal-box>p:nth-child(4),.input-box .list-box li>div:nth-child(4){
    width: 240px;
  }
  .input-box .tal-box>p:nth-child(5),.input-box .list-box li>div:nth-child(5){
    width: 130px;
  }
  .input-box .tal-box>p:nth-child(6),.input-box .list-box li>div:nth-child(6){
    width: 130px;
    padding-right: 30px;
  }
  .input-box .list-box li>div:nth-child(3),.input-box .list-box li>div:nth-child(4){
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .input-box .list-box li>div:nth-child(5){
    color: #FFA32A;
    line-height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .input-box .list-box li>div:nth-child(5) img{
    width: 13px;
    height: 13px;
    margin-right: 6px;
  }
  .input-box .list-box li>div:nth-child(3)>p{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 2px;
  }
  .input-box .list-box li>div:nth-child(3)>p img{
    width: 100%;
    height: 100%;
  }
  .input-box .list-box li>div:nth-child(4)>p{
    width: 40px;
    height: 40px;
    margin: 0 2px;
    position: relative;
  }
  .input-box .list-box li>div:nth-child(4)>p img{
    width: auto;
    height: auto;
    max-width: 40px;
    max-height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-45%);
  }
  .input-box .cxun{
     width: 90px;
     height: 30px;
     line-height: 30px;
     background-color: #FFA22A;
     cursor: pointer;
   }
  .input-box .sortul{
     position: absolute;
     top: 36px;
     left: 0;
     background-color: #000000;
     color: #FFFFFF;
     min-width: 160px;
     overflow: hidden;
   }
   .input-box .sortTypeul{
     position: absolute;
     top: 36px;
     left: 174px;
     background-color: #000000;
     color: #FFFFFF;
     min-width: 160px;
     overflow: hidden;
   }
   .input-box .sortul li,.sortTypeul li{
     height: 40px;
     line-height: 40px;
     padding:  0 10px;
     text-align: left;
     cursor: pointer;
   }
   .input-box .sortul li:hover,.sortTypeul li:hover{
     background-color:#85B8FA;
   }
 .input-box .hedar{
    display:flex;
    align-items: center;
    justify-content: space-between;
  }
  .input-box .hedar .option{
    display: flex;
    position: relative;
  }
  .input-box .hedar .option>div{
    width: 160px;
    height: 30px;
    border: 1px solid #333333;
    margin-right: 15px;
    display: flex;
    line-height: 30px;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    color: #999;
    font-size: 14px;
    cursor: pointer;
  }
  .input-box .hedar .option>div p{
     overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
  }
  .input-box .hedar .option>div>div{
    transform: rotate(90deg);
    font-size: 16px;
    transition: all .3s;
    /* color: #FFFFFF; */
  }
  .input-box .hedar{
    padding: 0 10px;
  }
  .input-box{
    padding: 57px 10px 30px;
  }
  .input-box .an-activ{
    transform: rotate(270deg) !important;
    transition:all .3s;
    /* color: #FFFFFF; */
  }
</style>
